<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="plantillas/disenio_comun.xhtml">

	<!-- This methods defined in head HTML tag -->
	<ui:define name="head">
		<!-- Stylesheets import. 
		<h:outputStylesheet name="home.css" library="css" />
		-->

	</ui:define>
	

	<ui:define name="contenido">
		<h:form enctype="multipart/form-data" id="FormularioDocumentos">
			<p:growl id="growl" showDetail="true" />
			<div>			
				<table border="0" cellpadding="5" cellspacing="0"  bgcolor="#EEEEEE">
					
					<tr>				 
				    	<td colspan="4" align="center">
				    		<h2 align="center"><h:outputText value="Gestor de Documentos"/></h2>
							<center>(De Talleres, Formadores, Coordinadores y Participantes)</center>
				    	</td>
					</tr>
					
					<p:messages  id="response" globalOnly="true" showDetail="true" autoUpdate="false" closable="true" />
					<tr>
						<td colspan="4" align="left">
						 

				    
				     <p:dialog widgetVar="dialog" id="dialog" modal="true" icon="ui-icon-extlink" >
			                    
								<p:dataTable id="tablaTalleres" var="taller" 
									    		value="#{controladorDocumentos.talleres}"						    		
									    		paginator="true" rows="10"  
			                					paginatorTemplate="{FirstPageLink} {PageLinks} {LastPageLink}"
			                					widgetVar="tablaTaller"   
									            emptyMessage="Ningún taller se encontro con con el criterio dado"
									            tableStyle="width:700px;font-size: 90%" >  
									  				
									  		<f:facet name="header">  
										        Talleres disponibles
										    </f:facet>
							
										     <p:column id="columnaNombreTaller" sortBy="#{taller.nombre}"
									                headerText="Nombre" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{taller.codigo} - #{taller.nombre}" />
									        </p:column> 
									        
									        <p:column id="columnaFechaInicio" 	sortBy="#{taller.strFechaInicio}"
									                headerText="Fecha de Inicio" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{taller.strFechaInicio}" />
									        </p:column> 
									         <p:column id="columnaFechaFin" sortBy="#{taller.strFechaFin}"
									                headerText="Fecha de Fin" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{taller.strFechaFin}" />
									        </p:column> 
									        
									          <p:column headerText="" style="width:70px">  
								                 <p:commandButton id="seleccionar" update=":FormularioDocumentos" icon="ui-icon-search" 
								                 process="@this" style="font-size: 80%" title="Seleccionar el taller" onclick="dialog.hide()">  
								                 	  <f:setPropertyActionListener value="#{taller.id_taller}" target="#{controladorDocumentos.loadTaller}" />
								                 </p:commandButton>
								                 
								                 
								             
									        </p:column> 

							</p:dataTable>
			         </p:dialog>
         			       

						</td>
					</tr>
					
				     <tr >
				     	<td colspan="4"  align="left">
				    	<p:commandButton value="Seleccionar Taller" onclick="dialog.show()"  icon="ui-icon-extlink"/>
				    	
				    
						<p:commandButton  value="Guardar Documento" icon= "ui-icon-disk" onclick="confimacion.show()"  title="Registrar Funciones."/>
								            	
         				</td>
				       </tr>
				       
				     
				       
					<tr >
				      		<td colspan="4"  align="left">  <h1><h:outputText value="Taller Seleccionado: " rendered="#{controladorDocumentos.mostrarTaller}"/>
				      			<h:outputText value="#{controladorDocumentos.tallerSelected.nombre}" rendered="#{controladorDocumentos.mostrarTaller}" /></h1></td>
				   </tr>
				     	
					
					
				  	<tr>
				  		<td colspan="4"  align="left">
				  		
				  		<p:fileUpload value="#{controladorDocumentos.file}" mode="simple" />
				  		<p:commandButton value="Enviar" ajax="false" actionListener="#{controladorDocumentos.upload}"  />
				  		
				  		<p:messages showDetail="true"/>  
				  		<p:fileUpload value="#{controladorDocumentos.file}" mode="advanced" multiple="true" sizeLimit="10000000"   
				  			allowTypes="/(\.|\/)(gif|jpe?g|png|txt|pdf|doc|docx|ppt|pptx)$/"  uploadLabel="Cargar" cancelLabel="Cancelar" 
				  			label="Buscar archivo" required="true" fileUploadListener = "#{controladorDocumentos.handleFileUpload}"
				  			fileLimit="5" />
				  					  		
				  		</td>
						
				  	</tr>

				</table>
			</div>
			

			<p:confirmDialog id="confirmationMessage" message="Desea guardar los cambios?"  
									                showEffect="bounce" hideEffect="explode"  
									                header="Confirmación de Usuario" severity="alert" widgetVar="confimacion">  
									                
					                			         
						<p:commandButton value="Si" id="eliminar" update=":FormularioDocumentos" 
							oncomplete="confimacion.hide()"	 process="@this" actionListener="#{controladorDocumentos.registrarFunciones}" />
							
						<p:commandButton value="No" onclick="confimacion.hide()" type="button" />   
									                  
			 </p:confirmDialog>  
			
    
		</h:form>
		
		

	</ui:define>
</ui:composition>